<script setup lang="ts">
	import { reactive, ref, unref } from 'vue'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { accountList } from '@/package_saleman/api/Home'
	const show = ref(false)

	interface RouteParams {
		store_id : string
		name : string,
		receive_money : string
		balance : string
		should_payment : string
	}
	const routeParams = ref<RouteParams>({
		store_id: '',
		name: '',
		receive_money: '',
		balance: '',
		should_payment: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
		// getDetail()
		getList()
	})
	const dataList = ref({})
	const getList = () => {
		accountList().then(res => {
			// console.log(res)	
			dataList.value = res.data
		})
	}
	const towIndex = ref(1)
	const useTabs = () => {
		const tabsColumns = reactive([
			{
				name: '待结算',
				id: 1
			},
			{
				name: '已结算',
				id: 2
			}
		])

		return {
			tabsColumns
		}
	}
	const { tabsColumns } = useTabs()
	const click = (index) => {
		towIndex.value = index.id
		getDetail()
	}

	const useGetDetail = () => {

		const detailInfo = ref({})

		const getDetail = async () => {
			const params = {
				store_id: unref(routeParams).store_id,
				pay_status: towIndex.value
			}
			const res = await paymentList(params)
			detailInfo.value = res.data.list
		}

		return {
			detailInfo,
			getDetail
		}
	}
	const { getDetail, detailInfo } = useGetDetail()

	const detailList = ref([])

	const showClick = (detail) => {
		detailList.value = detail
		show.value = true;
	}

	const close = () => {
		show.value = false;
	}
	const rangeTags = [{
		title: '全部',
		value: 0
	}, {
		title: '今日',
		value: 1
	}, {
		title: '近七日',
		value: 2
	}, {
		title: '近30日',
		value: 3
	}]
	// 定义当前选中的标签
	const currentTag = ref(0);

	// 选择标签的函数
	const selectTag = (value : number) => {
		currentTag.value = value;
	};
</script>

<template>
	<view class="content">
		<view class="main-mixn">
			<!-- <view class="yuan1"></view>
			<view class="yuan2"></view> -->

			<view style="display: flex;row-gap: 12rpx; align-items: center;">
				<view class="line-col">

				</view>
				<view class="mixn-name">业务统计</view>
			</view>

			<view class="mixn-line"></view>
			<view class="mixn-foot">
				<view class="foot-box">
					<view class="foot-name">销售总额</view>
					<view class="foot-text">{{ dataList.total?.xs }}</view>
				</view>
				<view class="foot-box">
					<view class="foot-name">退款总额</view>
					<view class="foot-text">{{ dataList.total?.tk}} </view>
				</view>
				<view class="foot-box">
					<view class="foot-name">开单数量</view>
					<view class="foot-text">{{dataList.total?.kd}}</view>
				</view>
				<view class="foot-box">
					<view class="foot-name">挂账金额</view>
					<view class="foot-text">{{dataList.total?.gz}}</view>
				</view>
			</view>
			<view class="mixn-foot1">
				<view class="foot-box">
					<view class="foot-name">收款金额</view>
					<view class="foot-text">{{dataList.total?.sk}}</view>
				</view>
				<view class="foot-box">
					<view class="foot-name">预收金额</view>
					<view class="foot-text">{{dataList.total?.ys}}</view>
				</view>
			</view>
		</view>
		<view style="padding: 30rpx 30rpx 0 30rpx;">
			<view class="main-header">
			业务数据
			<view class="tag-container">
				<view v-for="tag in rangeTags" :key="tag.value"
					:class="{ tag: true, selected: currentTag === tag.value }" @click="selectTag(tag.value)">
					{{ tag.title }}
				</view>
			</view>
		</view>
		</view>
		
		<view>
			<view class="mian-box">
				<view class="box-header">
					<view class="header-left">
						<view class="left-line"></view>
						<view class="left-name">销售收款</view>
						<view class="left-text">（元）</view>
					</view>
					<view class="header-right">
						<up-icon name="arrow-right" size="24rpx" color="rgba(155, 157, 158, 1)"></up-icon>
					</view>
				</view>
				<view class="box-foot">
					<view class="foot-box">
						<view class="foot-name">待交账</view>
						<view class="foot-text">{{dataList.xs?.dj}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">待审核</view>
						<view class="foot-text">{{dataList.xs?.ds}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">欠款</view>
						<view class="foot-text">{{dataList.xs?.qk}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">销售收款</view>
						<view class="foot-text">{{dataList.xs?.sk}}</view>
					</view>
				</view>
			</view>
			<view class="mian-box">
				<view class="box-header">
					<view class="header-left">
						<view class="left-line1"></view>
						<view class="left-name">预存收款</view>
						<view class="left-text">（元）</view>
					</view>
					<view class="header-right">
						<up-icon name="arrow-right" size="24rpx" color="rgba(155, 157, 158, 1)"></up-icon>
					</view>
				</view>
				<view class="box-foot">
					<view class="foot-box">
						<view class="foot-name">待交账</view>
						<view class="foot-text">{{dataList.yc?.dj}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">待审核</view>
						<view class="foot-text">{{dataList.yc?.ds}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">预存收款</view>
						<view class="foot-text">{{dataList.yc?.sk}}</view>
					</view>
				</view>
			</view>
			<view class="mian-box">
				<view class="box-header">
					<view class="header-left">
						<view class="left-line2"></view>
						<view class="left-name">退货款</view>
						<view class="left-text">（元）</view>
					</view>
					<view class="header-right">
						<up-icon name="arrow-right" size="24rpx" color="rgba(155, 157, 158, 1)"></up-icon>
					</view>
				</view>
				<view class="box-foot">
					<view class="foot-box">
						<view class="foot-name">待交账</view>
						<view class="foot-text">0</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">待审核</view>
						<view class="foot-text">0</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">欠款</view>
						<view class="foot-text">0</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">退货款</view>
						<view class="foot-text">0</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);
		padding-top: 30rpx;
		box-sizing: border-box;


		.main-mixn {
			width: 702rpx;
			// height: 266rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 4px 2px 11px rgba(55, 131, 252, 0.05);
			margin-left: 24rpx;
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;

			// .yuan1 {
			// 	position: absolute;
			// 	top: 30rpx;
			// 	right: 30rpx;
			// 	width: 28rpx;
			// 	height: 28rpx;
			// 	border-radius: 50%;
			// 	background: rgba(255, 255, 255, 0.2);
			// }

			// .yuan2 {
			// 	position: absolute;
			// 	top: 30rpx;
			// 	right: 45rpx;
			// 	width: 28rpx;
			// 	height: 28rpx;
			// 	border-radius: 50%;
			// 	background: rgba(255, 255, 255, 0.2);
			// }
			.line-col {
				width: 6rpx;
				height: 32rpx;
				background: rgba(15, 127, 255, 1);
				margin-right: 6rpx;
			}

			.mixn-name {
				font-size: 28rpx;
				font-weight: 700;
				// color: rgba(241, 245, 249, 1);
			}

			.mixn-line {
				width: 658rpx;
				height: 2rpx;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
				margin: 20rpx 0rpx;
			}

			.mixn-foot {
				display: flex;
				justify-content: space-between;

				.foot-box {
					.foot-name {
						font-size: 24rpx;
						font-weight: 500;
						// color: rgba(255, 255, 255, 1);
					}

					.foot-text {
						font-size: 28rpx;
						font-weight: 700;
						// color: rgba(255, 255, 255, 1);
						margin-top: 10rpx;
					}
				}
			}

			.mixn-foot1 {
				display: flex;
				margin-top: 20rpx;

				.foot-box {
					margin-right: 90rpx;

					.foot-name {
						font-size: 24rpx;
						font-weight: 500;
						// color: rgba(255, 255, 255, 1);
					}

					.foot-text {
						font-size: 28rpx;
						font-weight: 700;
						// color: rgba(255, 255, 255, 1);
						margin-top: 10rpx;
					}
				}
			}
		}

		.main-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.tag-container {
				display: flex;
				font-size: 24rpx;
				color: rgba(155, 157, 158, 1);

				.tag {
					padding: 10rpx;
					margin-left: 20rpx;
					border-radius: 12rpx;
					background-color: rgba(240, 240, 240, 1);
					border: 1px solid rgba(240, 240, 240, 1);

					&.selected {
						background-color: rgba(15, 127, 255, 1);
						border: 1px solid rgba(15, 127, 255, 1);
						color: #fff;
					}
				}
			}
		}

		.mian-box {
			width: 100%;
			height: 200rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 40rpx;

			.box-header {
				display: flex;
				justify-content: space-between;

				.header-left {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.left-line {
						width: 6rpx;
						height: 28rpx;
						border-radius: 2rpx;
						background: rgba(255, 195, 0, 1);
						margin-right: 20rpx;
					}

					.left-line1 {
						width: 6rpx;
						height: 28rpx;
						border-radius: 2rpx;
						background: rgba(0, 186, 173, 1);
						margin-right: 20rpx;
					}

					.left-line2 {
						width: 6rpx;
						height: 28rpx;
						border-radius: 2rpx;
						background: rgba(121, 72, 234, 1);
						margin-right: 20rpx;
					}

					.left-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(2, 14, 36, 1);
					}

					.left-text {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
					}
				}

				.header-right {}
			}

			.box-foot {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.foot-box {
					.foot-name {
						font-size: 26rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
					}

					.foot-text {
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(2, 14, 36, 1);
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>